<template>
	<div class="Register-from">
		<div class="Register-ul">
			<ul>
				<li>
					<div class="left-text">手机号码</div>
					<div class="right-input"><input type="text" class="" v-model="register.mobile" placeholder="请输入手机号码" /></div>
				</li>
				<li>
          <button-code class="left-text" id="code" :times="60"  ref="buttonCode" @sendOver="sendOver" @sending="sending" @sendSart="sendSart">
            <button ref='code' :class="!displaySend?'displaySend':''">{{CodeVal}}</button>
          </button-code>
					<div class="right-input"><input type="text" class="" v-model="register.smscode" placeholder="请输入手机验证码" /></div>
				</li>
				<li>
					<div class="left-text">密码</div>
					<div class="right-input"><input type="password" class="" v-model="register.password" placeholder="请输入密码(6-16位)" /></div>
				</li>
				<li>
					<div class="left-text">确认密码</div>
					<div class="right-input"><input type="password" class="" v-model="register.passwordAge" placeholder="请再次输入密码" /></div>
				</li>
			</ul>
		</div>
		<!-- btn -->
		<div class="Register-btn" @click="submit">
			完成
		</div>
	</div>
</template>

<script>
  import ButtonCode from '@/components/business/buttonCode/ButtonCode.vue'
  import {userService,baseService} from '#/service'
	export default {
		name: "Register",
		data() {
			return {
			  register:{
          mobile:'',
          smscode:'',
          password:'',
          passwordAge:''
        },
        redirect:'',
        displaySend:true,
				codeId: '',
				Time:'',
				CodeVal:'获取验证码',
        result:{},
        rules:{
          mobile:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'手机号不能为空！'
              },
              {
                type:'patter',
                rule:'phone',
                msg:'手机号码格式不对！'
              },
            ] ,
            value:'',
            join:'and'
          },
          smscode:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'验证码不能为空！'
              },
            ] ,
            value:'',
            join:'and'
          },
          password:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'密码不能为空！'
              },
              {
                type:'inFun',
                rule:'minLength(6)',
                msg:'密码为最短为6位字符'
              },
              {
                type:'inFun',
                rule:'maxLength(16)',
                msg:'最大长度不能超过16个字符'
              },
            ] ,
            value:'',
            join:'and'
          },
          passwordAge:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                equal:'password',
                msg:'两次密码不一致！'
              }
            ] ,
            value:'',
            join:'and'
          },
        }
			}
		},
    created(){
      this.redirect=this.$route.query.redirect||'index'

    },
		methods: {
		  changeCodeVal(num){
        this.CodeVal=`已发送${num}s`
      },
      //等待结束
      sendOver(){
        this.displaySend=true
        this.CodeVal=`获取验证码`
      },
      //验证码接口等待1分钟
      sending(num){
		    this.changeCodeVal(num)
      },
      //开始发送验证码
      async sendSart(num){

		    this.displaySend=false
        this.changeCodeVal(num);
		    await  baseService.smsSend({
          params:{mobilephone:this.register.mobile},
          abnormal:(config,res)=>{
            this.$refs.buttonCode.clearSend();
            this.$notify({
              title: '警告',
              message: res.message,
              type: 'warning'
            })
          },
          success:()=>{
            this.$toast({
              message: '发送成功！',
              position: 'middle',
              duration: 2000
            });
          }
        })
      },
      submit(){
		    this.$nextTick(()=>{
          this.result=this.$valiForm.form(this.rules);
          if(this.result.adopt){
            let res = userService.resetPassword({
              data:this.register
            })
            if (res.data) {
              this.$router.push({
                name:this.redirect
              })
            }
          }else{
            let keys=Object.keys(this.result)
            for(let i=0;i<keys.length;i++){
              if(keys[i]!=='adopt'){
                this.$toast({
                  message: this.result[keys[i]].msg,
                  position: 'middle',
                  duration: 2000
                });
                return
              }
            }
          }
        })


      },
			GetCode: function() {
				var time = 10;
				var _This = this;
				var dis = this.$refs.code;
				_This.Time = setInterval(function(){   //或者用箭头函数
						 time --;
						 if( time==0 ){
						 	   clearInterval(_This.Time);
						 	   _This.CodeVal = '重新获取';
						 	   dis.disabled = false;
						 	   time = 10;
						 }else{
						 		dis.disabled = true;
						 		_This.CodeVal = '已发送' + time + 's';
						 }
				},1000)
			}
		},
    watch:{
      'register.mobile':{
        immediate:true,
        handler(newVal){
          this.rules.mobile.value=newVal
        },
      },
      'register.smscode':{
        immediate:true,
        handler(newVal){
          this.rules.smscode.value=newVal
        },
      },
      'register.password':{
        immediate:true,
        handler(newVal){
          this.rules.password.value=newVal
        },
      },
      'register.passwordAge':{
        immediate:true,
        handler(newVal){
          this.rules.passwordAge.value=newVal
        },
      }
    },
    components:{
		  ButtonCode
    }

	}
</script>

<style>

	.Register-from {
		width: 100%;
		height: 100%;
		overflow: hidden;
    position: fixed;
    background: #ffffff;
    top: 0;
    left: 0;
	}

	.Register-ul {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.Register-ul ul li {
		width: 100%;
		height: 0.44rem;
		float: left;
		border-bottom: 0.01rem solid #eee;
	}

	.left-text {

		width: 1.35rem;
		margin-left: 0.18rem;
		height: 0.44rem;
		line-height: 0.44rem;
		color: #4097ff;
		font-size: 0.14rem;
		float: left;
	}
  .displaySend{

  }

	.right-input {
		float: left;
	}

	.right-input input {
		float: left;
		width: 2rem;
		height: 0.28rem;
		padding: 0.08rem 0;
		font-size: 0.14rem;
	}

	#code button {
    transition: 0.5s;
		border: none;
		outline: none;
		width: 0.8rem;
		height: 0.3rem;
		display: block;
		line-height: 0.3rem;
		background: rgb(142,10,190);
		border-radius: 0.05rem;
		color: white;
		text-align: center;
		margin-top: 0.07rem;
	}
  #code .displaySend{
    background: #eef1f6;
    color: #bfcbd9;
  }

	.Register-btn {
		width: 90%;
		margin: 0.3rem auto 0 auto;
		height: 0.38rem;
		line-height: 0.38rem;
    background: rgb(142,10,190);
		text-align: center;
		color: white;
		font-size: 0.12rem;
		border-radius: 0.05rem;
	}
</style>
